<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini">
        <el-form-item label="GUID">
            <el-input disabled :value="node.uuid"></el-input>
        </el-form-item>
        <el-form-item label="机柜名称" prop="cabinetName">
            <el-input v-model="ruleForm.cabinetName"></el-input>
        </el-form-item>
        <el-form-item label="机柜编码" prop="cabinetId">
            <el-input v-model="ruleForm.cabinetId"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    data () {
        return {
            node: {},
            ruleForm: {
                cabinetName: '',
                cabinetId: '',
            },
            rules: {
                cabinetName: [
                    { required: true, message: '请选择机柜', trigger: 'blur'},
                ],
                cabinetId: [
                    { required: true, message: '请输入机柜编码', trigger: 'blur'},
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('changeNode', {
                        uuid: this.node.uuid,
                        params: {
                            cabinetName: this.ruleForm.cabinetName,
                            cabinetId: this.ruleForm.cabinetId
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        init(data, item) {
            this.node = item;
            this.ruleForm.cabinetId = this.node.cabinetId || this.node.uuid.replace(/-/g, '');
            this.ruleForm.cabinetName = this.node.cabinetName || '';
            // data.nodeList.filter((node) => {
            //     if (node.id === item.id) {
            //         this.node = node;
            //     }
            // })
        },
    },
    mounted () {

    }
}
</script>
<style lang="scss" scoped>

</style>
